<template>
  <div class="box">
    <span class="litsItem">{{ index + 1 }}</span>
    <!--    <el-button v-if="index != 0" @click="deleteEvtion">删除</el-button>-->
    <div class="icon" @click="deleteEvtion">
      <i class="el-icon-close"></i>
    </div>
    <el-form label-width="80px" ref="formList">
      <el-row>
        <el-col :span="3.5" style="height: 35px;">
          <el-form-item label="名称:" prop="approveModelName">
            <el-input
              v-model="item.approveModelName"
              style="width: 80px;"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" style="height: 35px;">
          <el-form-item label="审批人:" prop="departmentType">
            <!--<el-input v-model="item.roleId"></el-input>-->
            <el-select
              v-model="item.departmentType"
              placeholder="请选择"
              @change="deptOptions"
            >
              <el-option
                v-for="item in deptData"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" style="height: 35px;" v-if="item.departmentType == 2">
          <el-form-item
            style="line-height: 30px !important;margin-left: 10px"
            label-width="0"
            prop="firmId"
          >
            <el-select
              v-model="item.firmId"
              placeholder="请选择公司"
              @change="firmChang"
            >
              <el-option
                v-for="item in firmList"
                :key="item.id"
                :label="item.companyName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" style="height: 35px;" v-if="item.departmentType == 2">
          <el-form-item
            style="line-height: 30px !important;margin-left: 10px;"
            label-width="0"
            prop="deptId"
          >
            <treeselect
              :options="item.deptList"
              :clearable="false"
              v-model="item.departmentId"
              :normalizer="normalizer"
              @select="handleNodeClick"
              placeholder="请选择部门"
            />
          </el-form-item>
        </el-col>
        <el-col :span="3" style="height: 35px;">
          <el-form-item
            style="margin-left: 10px"
            label-width="0px"
            prop="appointType"
          >
            <!--        <el-input v-model="item.roleId"></el-input>-->
            <el-select
              v-model="item.appointType"
              placeholder="请选择"
              @change="roleOptions"
            >
              <el-option
                v-for="item in role"
                :key="item.id"
                :label="item.roleName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10" style="height: 35px;" v-if="item.showRoleId == 2">
          <el-form-item label="指定人:">
            <el-input
              v-model="item.employeeId"
              placeholder="输入邮箱查询"
              style="width: 120px;"
              @keyup.enter="getNameBy"
            ></el-input>
            <el-button
              size="small"
              style="height:30px;margin-left:10px"
              @click="getNameBy(item.employeeId)"
              >查询</el-button
            >
          </el-form-item>
        </el-col>
        <el-col :span="6" style="height: 35px;" v-if="item.showRoleId == 1">
          <el-form-item label="角色:">
            <el-select v-model="item.roleId" placeholder="请选择">
              <el-option
                v-for="item in roleList"
                :key="item.id"
                :label="item.roleName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10" style="height: 40px;">
          <el-form-item label="说明:">
            <el-input
              v-model="item.moduleExplain"
              type="textarea"
              :rows="1"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10" style="height: 40px;">
          <el-form-item label="标准意见:">
            <el-input
              v-model="item.standardOpinion"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20" style="height: 35px;">
          <el-form-item label="表格代码:">
            <el-input
              type="textarea"
              :rows="1"
              v-model="item.modelCode"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { LOAD_ROOT_OPTIONS } from "@riophae/vue-treeselect";
import {
  getRoleList,
  // orginlistTree
  getCompanyList,
  departAdd,
  getfindName
} from "../../../src/assets/js/api";
const sleep = d => new Promise(r => setTimeout(r, d));
let called = false;
export default {
  name: "ApprocalDialog",
  components: { Treeselect },
  props: [
    "index",
    "item",
    "deptData",
    "roleData",
    "approveModels",
    "showRole",
    "showPeople",
    "newfun"
  ],
  data() {
    return {
      normalizer(node) {
        //去掉children=[]的children属性
        if (node.children == null) {
          delete node.children;
        }
      },
      showCorporateSector: false,
      showRolePeople: false,
      showRoleEcho: false,
      role: [],
      roleList: [],
      dept: [],
      //deptList: [],
      showDeptId: "",
      showRoleId: "",
      // select:"按角色",
      deptSelect: "",
      //  获取指定人查询条件
      query: {
        email: "",
        firmId: "",
        deptId: ""
      },
      // 指定人id
      employeeId: "",
      //  公司数据
      firmList: []
    };
  },
  created() {
    this.role = this.roleData;
    this.getRoleList();
    this.getCompanyList();
    //this.item.firmId = this.showCompanyId;
    this.newFun();
  },
  methods: {
    async loadOptions({ action }) {
      if (action === LOAD_ROOT_OPTIONS) {
        if (!called) {
          await sleep(2000);
          called = true;
        } else {
          await sleep(1000);
          this.approveModels.map(item => {
            if (item.firmId != null) {
              departAdd(item.firmId).then(res => {
                item.deptList = res.data;
              });
            }
            return item;
          });
        }
      }
    },
    newFun() {
      if (this.newfun == 1) {
        this.approveModels.map(item => {
          if (!item.employeeId !== null) {
            item.showRoleId = 2;
            item.appointType = 2;
            if (Number.isInteger(item.employeeId)) {
              item.chinaId = item.employeeId;
              getfindName(item.employeeId).then(res => {
                item.employeeId = res.data.employeeName;
              });
            }
          }
          if (item.roleId !== null) {
            item.showRoleId = 1;
            item.appointType = 1;
          }
          if (!item.employeeId && !item.roleId) {
            item.showRoleId = "";
            item.appointType = "";
          }
          return item;
        });
      }
    },
    //根据id查询对应的角色名字
    // getfindName() {
    //   this.approveModels.map(item => {
    //     if (item.employeeId == null) {
    //       return false;
    //     } else if (item.employeeId == undefined) {
    //       return false;
    //     } else {
    //       item.chinaId = item.employeeId;
    //       getfindName(item.employeeId).then(res => {
    //         item.employeeId = res.data.employeeName;
    //       });
    //     }
    //     return item;
    //   });
    // },
    // 删除添加的表单
    deleteEvtion() {
      this.$emit("delDialog", this.index);
    },
    // 获取公司
    getCompanyList() {
      getCompanyList().then(res => {
        this.firmList = res.data;
      });
    },
    // 获取被点击公司id
    firmChang(item) {
      this.query.firmId = item;
      this.getDepart(item);
      this.item.departmentId == null;
      this.$set(this.item, "departmentId", null);
      this.$forceUpdate();
    },
    //获取公司部门列表
    getDepart(id) {
      departAdd(id).then(res => {
        this.item.deptList = res.data;
        this.$forceUpdate();
      });
    },
    // 获取部门id
    handleNodeClick(data) {
      this.query.deptId = data.id;
    },
    // 查询角色
    getRoleList() {
      getRoleList().then(res => {
        this.roleList = res.data;
      });
    },
    //获取下拉id 显示指定人或角色
    roleOptions(id) {
      this.$forceUpdate();
      this.item.showRoleId = id;
    },
    //获取审核id
    deptOptions(id) {
      this.showDeptId = id;
    },
    getNameBy(item) {
      var myreg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
      if (!myreg.test(item)) {
        this.$message({
          message: "请输入正确的邮箱格式",
          type: "error"
        });
        return false;
      }
      this.query.email = item;
      const token = localStorage.getItem("token");
      this.axios
        .get("/sys/tbEmployee/findByEmail/", {
          //参数列表
          params: this.query,
          //请求头配置
          headers: { token: token }
        })
        .then(res => {
          if (res.data.data == null) {
            this.$message({
              message: "未找到",
              type: "error"
            });
            this.item.employeeId = null;
            item.employeeId = null;
          } else {
            this.item.employeeId = res.data.data.employeeName;
            this.item.chinaId = res.data.data.id;
          }
          // this.$emit("func", this.employeeId);
        });
    },
    changRoleId() {
      this.item.map(item => {
        if (typeof item.employeeId == "string") {
          this.item.employeeId = item.chinaId;
        }
      });
    }
  }
};
</script>

<style scoped type="less">
.box {
  position: relative;
  padding: 20px 30px 20px 10px;
  background-color: rgb(242, 242, 242);
  margin-bottom: 20px;
}
.icon {
  position: absolute;
  top: 5px;
  right: 5px;
}
.icon:hover {
  cursor: pointer;
}
.el-icon-close:before {
  font-size: 20px;
}
.vue-treeselect {
  width: 125px !important;
  margin-top: 5px;
}
::v-deep .vue-treeselect__control {
  display: -webkit-box;
  height: 30px;
  line-height: 30px;
}
::v-deep .vue-treeselect__placeholder {
  line-height: 30px;
}
.litsItem {
  position: absolute;
  left: 16px;
  top: 14px;
  font-size: 16px;
  font-weight: bolder;
}
</style>
